<template>
	<view class="container">
		<uni-easyinput errorMessage v-model="userInfo.nickname" :styles="styles" focus placeholder="请输入内容"
			@input="input"></uni-easyinput>
		<p class="desc">昵称不能超过10个汉字或20个英文字母，支持中英文、数字、 下划线</p>
		<view class="save-btn" @click="save">
			保 存
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		mySetUserInfo,
		myUserInfo
	} from '@/service';
	import {
		ref
	} from 'vue';
	const styles = {
		backgroundColor: "#112959",
		borderRadius: "15rpx",
		color: "#00C1FF",
		fontSize: "30rpx"
	}
	const getUserInfo = async () => {
		userInfo.value = await myUserInfo()
	}
	const save = async () => {
		await mySetUserInfo({
			field: "nickname",
			value: userInfo.value.nickname
		})
		uni.navigateBack()
	}
	const userInfo = ref({})
	onShow(async () => {
		getUserInfo()

	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: $body-bc;
		padding: 24rpx;

		.desc {
			color: $content-color;
			font-weight: 400;
			font-size: 26rpx;
			line-height: 38rpx;
			margin-top: 34rpx;
		}

		::v-deep .uni-easyinput__content {
			border: 0rpx solid transparent;
			line-height: 100rpx;
			height: 100rpx;
			font-size: 30rpx;
			color: #00C1FF;
		}

		::v-deep .uniui-clear {
			color: #00C1FF !important;
		}

		.save-btn {
			text-align: center;
			width: 560rpx;
			height: 104rpx;
			background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/btn_bc.png) center/ 100% 100%;
			color: $primary-color;
			margin: 0 auto;
			line-height: 104rpx;
			font-weight: 400;
			font-size: 30rpx;
			margin-top: 188rpx;
		}
	}
</style>